import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Pressable,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useAppContext } from '../context/AppContext';
import { useTheme } from '../context/ThemeContext';
import { createThemedStyles, getDarkThemeEnhancements, getEmptyEnhancements } from '../utils/themeStyles';
import { News } from '../types';
import { truncateText } from '../utils/helpers';

const LatestNews: React.FC = () => {
  const navigation = useNavigation();
  const { state: { news } } = useAppContext();
  const { theme, isDark } = useTheme();
  
  // 创建主题样式
  const themedStyles = createThemedStyles(theme);
  const darkEnhancements = isDark ? getDarkThemeEnhancements(theme) : getEmptyEnhancements();
  
  // 获取最新的3条新闻
  const latestNews = news.slice(0, 3);
  
  const handleNewsPress = (newsItem: News, event: any) => {
    // 确保只有在明确点击按钮时才导航
    if (event) {
      event.stopPropagation();
    }
    // 导航到新闻详情页
    // @ts-ignore - 忽略类型错误，因为导航类型定义可能不完整
    navigation.navigate('NewsDetail', { news: newsItem });
  };
  
  if (latestNews.length === 0) {
    return null;
  }
  
  return (
    <View style={[themedStyles.elevatedCard, styles.container, isDark && darkEnhancements.enhancedShadow]}>
      <View style={styles.header}>
        <Text style={[themedStyles.subtitle, styles.title]}>📰 最新资讯</Text>
        <TouchableOpacity onPress={() => navigation.navigate('News' as never)}>
          <Text style={[styles.viewAll, { color: theme.primary }]}>查看全部</Text>
        </TouchableOpacity>
      </View>
      
      {latestNews.map((item, index) => (
        <View 
          key={item.id} 
          style={[
            styles.newsItem, 
            { borderBottomColor: theme.divider },
            index === latestNews.length - 1 && styles.lastNewsItem
          ]}
        >
          <Text style={styles.newsIcon}>📰</Text>
          <View style={styles.newsContent}>
            <Text style={[themedStyles.body, styles.newsTitle]} numberOfLines={1}>
              {item.title}
            </Text>
            <Text style={[themedStyles.caption, styles.newsExcerpt]} numberOfLines={1}>
              {truncateText(item.content, 50)}
            </Text>
            <Text style={[themedStyles.label, styles.newsTime]}>{item.publishTime}</Text>
          </View>
          <Pressable
            style={[
              styles.readMoreBtn, 
              { 
                backgroundColor: theme.surface,
                borderColor: theme.border,
              }
            ]}
            onPress={(event) => handleNewsPress(item, event)}
            hitSlop={{ top: 5, bottom: 5, left: 5, right: 5 }}
          >
            <Text style={[styles.readMoreText, { color: theme.primary }]}>查看</Text>
          </Pressable>
        </View>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginBottom: 24,
  },
  
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
  },
  
  title: {
    // 样式由themedStyles.subtitle提供
  },
  
  viewAll: {
    fontSize: 14,
    fontWeight: '600',
  },
  
  newsItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
  },
  
  lastNewsItem: {
    borderBottomWidth: 0,
  },
  
  newsIcon: {
    fontSize: 24,
    marginRight: 12,
  },
  
  newsContent: {
    flex: 1,
    paddingRight: 8,
  },
  
  newsTitle: {
    fontWeight: '600',
    marginBottom: 4,
  },
  
  newsExcerpt: {
    marginBottom: 4,
    lineHeight: 18,
  },
  
  newsTime: {
    // 样式由themedStyles.label提供
  },
  
  readMoreBtn: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
    borderWidth: 1,
    marginLeft: 8,
  },
  
  readMoreText: {
    fontSize: 12,
    fontWeight: '600',
  },
});

export default LatestNews;